<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="init()">
		请选择<select id="province" onchange="changePro()"></select>省<select id="city"></select>市
	</body>
	<script type="text/javascript">
		let s1= document.getElementById("province");
		let s2= document.getElementById("city");
		let pros=[];
		function init(){
			let xhr=new XMLHttpRequest();
			xhr.open("get","city.json",true);
			xhr.send();
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4&&xhr.status==200){
					pros=JSON.parse(xhr.responseText);
					//所以省写入下拉列表
					for (var i = 0; i < pros.length; i++) {
						s1.options[i]=new Option(pros[i].name);
					}
					
					for (var i = 0; i < pros[0].cities.length; i++) {
						s2.options[i]=new Option(pros[0].cities[i]);
					}
				}
			}
		}
		function changePro(){
			let sele=s1.selectedIndex;//获取下拉列表当前选中!
			s2.length=0;
			for (var i = 0; i < pros[sele].cities.length; i++) {
				s2.options[i]=new Option(pros[sele].cities[i]);
			}
		}
	</script>
</html>
